import React from 'react'
import PageTitle from 'component/page-title/index.jsx'
import {Link} from 'react-router-dom'
import TableList from 'util/table-list/index.jsx'

import MUtil from 'util/mm.jsx'
const __mm=new MUtil();

import Product from 'service/product-service.jsx'
const __product=new Product();

class CategoryList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            parentCategoryId:this.props.match.params.categoryId,
            list:[]
        }
    }
    componentDidMount(){
        this.loadCategoryList();
    }
    componentDidUpdate(preveProps,prevState){
        let oladPath =preveProps.location.pathname,
            newPath=this.props.location.pathname,
            newId=this.props.match.params.categoryId;
        if(oladPath!==newPath){
            this.setState({
                parentCategoryId:newId
            },()=>{
                this.loadCategoryList();
            })
        }
    }
    //加载品类列表
    loadCategoryList(){
        __product.getCategorytList(this.state.parentCategoryId).then(res=>{
            this.setState({
                list:res
            });
        },errMsg=>{
            this.setState({
                list:[]
            })
            __mm.errorTips(errMsg);
        });
    }
    //当页数发生变化的时候
    onPageNumChange(pageNum){
        this.setState({
            pageNum:pageNum
        },()=>{
            this.loadUserList();
        })
    }
    //更新品类的名字
    onUpdateName(categoryId,categoryName){
        let newName=window.prompt('请输入新的品类名称',categoryName);
        if(newName){
            __product.updateCategoryName({
                categoryId:categoryId,
                categoryName:newName
            }).then((res)=>{
                __mm.successTips(res);
                this.loadCategoryList();
            },(errMsg)=>{
                __mm.errorTips(errMsg);
            })
        }
    }
    render(){

        return (
            <div id="page-wrapper">
                <PageTitle title="品类列表" >
                    <div className="page-header-right">
                        <Link className="btn btn-primary btn-sm" to="/product-category/add">
                            <i className="fa fa-plus"></i>
                            <span>添加品类</span>
                        </Link>
                    </div>
                </PageTitle>
                <div className="row">
                    <div className="col-md-12">
                        {
                            this.state.parentCategoryId
                                ? <p> 父品类ID:{this.state.parentCategoryId}</p>
                                :<p></p>
                        }
                    </div>
                </div>
                <TableList tableHeads={['品类ID','品类名称','操作']}>
                    {
                        this.state.list.map((category,index)=>{
                            return(
                                <tr key={index}>
                                    <td>{category.id}</td>
                                    <td>{category.name}</td>
                                    <td>
                                        <a className="opear" onClick={(e)=>{this.onUpdateName(category.id,category.name)}}>修改名称
                                        </a>
                                            {
                                                category.parentId===0 ?
                                                    <Link to={`/product-category/index/${category.id}`}>查看子品类</Link>
                                                :null
                                            }
                                    </td>
                                </tr>
                            )
                        })
                    }
                </TableList>
            </div>
        )
    }
}
export default CategoryList;